草庐IT

前端 PM

全部标签

Facebook出品的前端工具链凉了!

9月2日,Facebook出品的前端工具链Rome宣布停止维护,储存库已存档,项目由babel和yarn的作者 SebastianMcKenzie 发起。此后,Rome将由Biome进行维护和新功能开发。公司已经将Rome团队所有成员都解雇了。发布仅三年的前端工具链Rome凉了。Rome的官方介绍:Rome是一个用于JavaScript、TypeScript、JSON、HTML、Markdown和CSS的格式化程序、代码检查器、打包工具等工具。Rome旨在取代Babel、ESLint、webpack、Prettier、Jest等工具。Rome将以前独立的功能融合到一个工具中。通过构建在共享基础

前端路由hash模式以及history模式详解

文章目录前言一、hash模式1、hash定义2、location对象3、window.onhashchange事件二、history模式1、history定义2、historyAPI3、window.onpopstate事件4、解决history模式下页面刷新404问题前言在前后端分离的项目中,前端一般使用SPA单页面应用模式来开发项目。那么,什么是SPA呢?单页Web应用(singlepagewebapplication,SPA),就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。我的理解:单页面应用就是改变页面的url地址,不会向后

vue前端实现上传文件的两种方式

1.使用form表单的形式第一种方式就是使用FormData的方式进行上传html代码:点击上传JS代码://请求-上传附件upLoad(){const_this=this;//constfileType=[//"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",//"application/vnd.ms-excel"//];constfileType=['xls','xlsx','et']constinputFile=document.createElement("input")inputFile.type=

web前端概述

web前端概述web前端:网站的前台部分,是运行在电脑,移动端等浏览器上展示给用户浏览的网页。前端开发:用代码根据UI设计实现网站前台页面、内容以及交互效果UI:用户界面UI设计:设计师运用设计软件(PhotoShop等)设计的用户名界面,一般是图片居多,没有交互效果。web(worldwideweb):缩小为WWW,万维网,全球广域网。互联网的总称,他是一种基于超文本和http,全球性的,动态交互的,跨平台的分布式图形信息系统。web主要是通过网页传递信息。web前端三大件:.HTML超文本标记语言,编写网页的结构。可以理解为像人的骨头一样,决定网页的结构。不是编程,主要是记住常用的标记即可

前端面试:【代码质量与工程实践】单元测试、集成测试和持续集成

在现代软件开发中,确保代码质量是至关重要的。单元测试、集成测试和持续集成是关键的工程实践,用于提高代码的可靠性和可维护性。本文将深入探讨这些概念,以及它们如何在软件开发中发挥作用。1.单元测试(UnitTesting):单元测试是一种测试方法,用于验证代码中的各个独立单元(通常是函数或方法)是否按预期工作。在单元测试中,每个单元都会被隔离测试,以确保其功能正确。为什么重要:早期发现问题:单元测试能够在代码开发的早期阶段捕获和解决问题,减少了后期修复的成本。可维护性:单元测试使代码更易于维护,因为它提供了一种自动验证代码是否仍然按预期工作的方式。文档化:单元测试可以充当代码的文档,帮助其他开发者

献给前端研发同学的福利!性能诊断神器——Performance insight!

Performanceinsight概述Performanceinsight是chromeChromeDevTools中的自带工具(Chrome102版本发布),目前还是在chromeDevTool中启动即可,如下图所示:我们可以模拟cpu,选择4xslowdown,就开始模拟4倍低速CPU,同理还可以模拟网络应对不同网络的测试需求。点击上图中的Measurepageload就开始对当前的页面性能进行分析了!Performanceinsight工具最方便的部分是"insights"面板,它位于面板的最右侧。它以垂直时间线的形式按照事件发生的顺序显示事件,如渲染阻塞请求、长任务、布局变化等。点击

前端EventSource收不到流数据及EventSource的onmessage不执行问题

问题描述在使用EventSource的onmessage接收后台数据时,发现不论怎么写,都没法在前端展示后台返回过来的数据,但是event.error和open是可以执行的,前段代码如下:DOCTYPEhtml>html>head>metacharset="UTF-8">title>EventSourceExampletitle>head>body>h1>getmypage!h1>divid="messages">div>script>varsource=newEventSource("/interface");source.onmessage=function(event){.//这里不执行

百度语音识别(语音转文字)vue版本 前端(后端需要做个请求转发即可)

这个项目需要用到语音识别,最后选择的是百度语音识别。原因第一是项目中用到的地方不大,属于微型和小型功能点,第二就是属于临时增加的需求,没有太多的时间去开发,第三就是后端对于自主开发语音识别觉得较为困难,浪费时间。加载语音识别的文件下载recorder.js:主要用来收集声音转化为mp3等格式的文件。放置在如图所示的位置注意:这个地方有一个关键点,在recorder.js文件里,有一个文件加载路径,这个路径是绝对路径,而不是相对路径,如果你的网址是在二级网址上或文件存放服务器位置在二级目录下,请修改对应的路径,如下图所示:正常在本地开发,切换成/js/recorder/即可,但在生产环境则需要改

vue+springboot 上传文件、图片、视频,回显到前端。

效果图预览:视频:设计逻辑数据库表前端vuehtmldivclass="right-pannel">divclass="data-box">divstyle="display:block"id="">divclass="titleclearfix">divclass="allfl"data-folderid="0">aclass="here">上传附件(上传项目演示视频应为mp4格式)a>div>div>divclass="container_con">el-dialogtitle="提示":visible.sync="workLateTip"width="30%">span>作业已截止,禁止

vue前端实现图片下载,实现点击按钮弹出本地窗口,选择自定义保存路径

vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径一、实现下载二、实现自定义保存路径直接上代码,废话不多说,点关注,不迷路一、下载代码!DOCTYPEhtml>html>head>metacharset="utf-8"/>metahttp-equiv="X-UA-Compatible"content="IE=edge"/>title>/title>metaname="description"content=""/>metaname="viewport"content="width=device-width,initial-scale=1"/>linkrel="stylesh